<!--
 * @Author: wwssaabb
 * @Date: 2021-07-03 11:08:41
 * @LastEditTime: 2021-07-05 09:18:36
 * @FilePath: \demo\koa2_demo\demo\连mongodb接数据库增删改查_demo\html\list.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户列表</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    li{
      list-style: none;
    }
    body{
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      font-size: 14px;
    }
    .container{
      width: 50vw;
      background: #fafafa;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid #a8a8a8;
    }
    .table{
      width: 100%;
      height: 100%;
    }
    .title,.row{
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }
    .title div{
      font-size: 18px;
      font-family: '楷体';
      letter-spacing: 5px;
      border-bottom: none;
    }
    .row{
      font-family: '黑体';
      border-bottom: 1px solid #a8a8a8;
    }
    .row:nth-child(2n+1){
      background: #e8e8e8;
    }
    .row:last-child{
      border-bottom: none;
    }
    .title div,.row div{
      text-align: center;
    }
    .name,.action{
      width: 15%;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .name{
      border-right: 1px solid #a8a8a8;
    }
    .hobbies,.email{
      width: 30%;
      height: 60px;
      border-right: 1px solid #a8a8a8;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .age{
      width: 10%;
      height: 60px;
      border-right: 1px solid #a8a8a8;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .title{
      font-weight: bold;
      background: #e8e8e8;
      border-bottom: 1px solid #a8a8a8;
    }
    .action{
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }
    .del{
      color: #fff;
      font-size: 14px;
      background: #e05f51;
      padding: 2px 5px;
      border-radius: 5px;
    }
    .mod{
      color: #fff;
      font-size: 14px;
      background: #54a95e;
      padding: 2px 5px;
      border-radius: 5px;
    }
    .add_btn{
      position: fixed;
      top: 50%;
      right: 17.5vw;
      transform: translate(100%,-50%);
      padding: 10px 20px;
      border-radius: 20px;
      color: #fff;
      font-size: 18px;
      text-align: center;
      background: #3076be;
    }
    .add_btn:hover,.mod:hover,.del:hover{
      opacity: .7;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="table">
      <div class="title">
        <div class="name title">用户名</div>
        <div class="age title">年龄</div>
        <div class="hobbies title">爱好</div>
        <div class="email title">邮箱</div>
        <div class="action title">操作</div>
      </div>
      <!-- <div class="row">
        <p class="name">张三</p>
        <p class="age">20</p>
        <p class="hobbies">足球、篮球、橄榄球</p>
        <p class="email">zhansan@qq.com</p>
        <p class="action">删除、修改</p>
      </div> -->
    </div>
    <div class="add_btn">添加用户</div>
    <script>
      $.get('http://localhost:3000/list',res=>{
        console.log(res)
        let list =res
        let ac_arr=['name','age','hobbies','email','action']
        let table=$('.table')
        let df=document.createDocumentFragment()
        for(let obj of list){
          let row=document.createElement('div')
          row.className='row'
          row.id=obj._id
          for(let i of ac_arr){
            if(i==='_id') continue;
            let p=document.createElement('div')
            p.className=i
            
            if(i==='hobbies'){
              p.innerHTML=obj[i].join('、')
            }else if(i==='action'){
              let mod=document.createElement('div')
              mod.className='mod'
              mod.innerHTML='修改'
              mod.addEventListener('click',()=>modifyItem(obj._id))
              let del=document.createElement('div')
              del.className='del'
              del.innerHTML='删除'
              del.addEventListener('click',()=>deleteItem(obj._id))
              p.appendChild(mod)
              p.appendChild(del)
            }else{
              p.innerHTML=obj[i]
            }
            row.appendChild(p)
          }
          df.appendChild(row)
        }
        table[0].appendChild(df)
        
        function deleteItem(id){
          console.log('删除'+id+'的用户')
          let sub_obj={_id:id}
          $.post('http://localhost:3000/delete',sub_obj,res=>{
            console.log(res)
            if(res.statusCode===200){
              $('#'+id).remove()
              alert(res.message)
            }
          })
        }
        let index=decodeURIComponent(window.location.href).lastIndexOf('/')
        function modifyItem(id){
          console.log('修改'+id+'的用户')
          
          window.location.href=window.decodeURIComponent(window.location.href).slice(0,index)+'/modify.html?_id='+id
        }
        function addItem(){
          console.log('添加用户')
          window.location.href=window.decodeURIComponent(window.location.href).slice(0,index)+'/add.html'
        }
        $('.add_btn').click(addItem)
      })
      


    </script>
    
  </div>
</body>
</html>